<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<link rel="stylesheet alternate" href="data:text/css,p { color:green }" title="prefer">
<link rel="stylesheet alternate" href="data:text/css,p { color:red }" title="notpreferred">
<link id="l1" rel="stylesheet" title="notpreferred">
<link id="l2" rel="stylesheet" href title="notpreferred">
<link id="l3" rel="stylesheet" href="" title="notpreferred">
<link id="l4" rel="icon" href="data:text/css," title="notpreferred">
<link id="l5" rel="stylesheet" href="data:text/css,">
<p id="p1">This text should be green</p>
<script>
    test(() => {
        assert_equals(getComputedStyle(p1).color, "rgb(0, 0, 0)");
    }, "Check that #p1 is initially black.");

    test(() => {
        l1.setAttribute("title", "prefer");
        assert_equals(getComputedStyle(p1).color, "rgb(0, 0, 0)");
    }, "Do not set preferred set when href missing.");

    test(() => {
        l2.setAttribute("title", "prefer");
        assert_equals(getComputedStyle(p1).color, "rgb(0, 0, 0)");
    }, "Do not set preferred set when href has no value.");

    test(() => {
        l3.setAttribute("title", "prefer");
        assert_equals(getComputedStyle(p1).color, "rgb(0, 0, 0)");
    }, "Do not set preferred set when href has empty value.");

    test(() => {
        l4.setAttribute("title", "prefer");
        assert_equals(getComputedStyle(p1).color, "rgb(0, 0, 0)");
    }, "Do not set preferred set for rel=icon.");

    test(() => {
        l5.setAttribute("title", "prefer");
        assert_equals(getComputedStyle(p1).color, "rgb(0, 128, 0)");
    }, "Setting the title attribute set the preferred set.");
</script>
